import "./CustomPreview.scss";
import React, { Component,Fragment } from "react";
import PropTypes from "prop-types";

export default class CustomPreview extends Component {
    constructor() {
        super();
        this.state = {
            pageName: "",
            htmlString: "",
            HtmlJsx: null,
        };
    }
    UNSAFE_componentWillReceiveProps(props) {
        this.setState({
            pageName: props.pageName,
            htmlString: props.htmlString,
            HtmlJsx: props.HtmlJsx,
        });
    }
    render() {
        const { pageName, htmlString, HtmlJsx } = this.state;
        return (
            <div className="previewArea flex-column">
                <div className="pt-8 pl-10">预览效果</div>
                <div className="flex-1 p-16">
                    <div className="previewBg wh-100 relative">
                        <div className="absolute activeTitle">{pageName}</div>
                        {HtmlJsx ? (
                            <div className="pageContainer width-100">{HtmlJsx}</div>
                        ) : (
                            <div className="pageContainer width-100" dangerouslySetInnerHTML={{ __html: htmlString }}></div>
                        )}
                    </div>
                </div>
            </div>
        );
    }
}
CustomPreview.propsType = {
    pageName: PropTypes.string,
    htmlString: PropTypes.string,
    HtmlJsx: PropTypes.element,
};
CustomPreview.defaultProps = {
    pageName: "页面名称",
    htmlString: "",
    HtmlJsx: null,
};
